<template>
  <Dialog :title="title" :model-value="visible" width="600px" :before-close="closeForm">
    <Form
      :schema="scheme"
      :model="power"
      @register="formRegister"
      :isCol="false"
      label-width="120px"
      :rules="rules"
    />
    <template #footer>
      <el-space>
        <BaseButton :loading="loading" type="primary" @click="save">确定</BaseButton>
        <BaseButton @click="resetForm">重置</BaseButton>
      </el-space>
    </template>
  </Dialog>
</template>

<script>
import { GetTrees } from '@/api/role/power'
import * as appPowerApi from '@/flow/api/appPower'
import { Dialog } from '@/components/Dialog'
import { Form } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
const { formRegister, formMethods } = useForm()
export default {
  components: {
    Form,
    Dialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    appName: {
      type: String,
      default: null
    },
    appId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      title: '设置应用菜单',
      menus: [],
      scheme: [],
      menCache: {},
      rules: {
        Name: [
          {
            required: true,
            message: '菜单名不能为空！',
            trigger: 'blur'
          }
        ],
        pid: [
          {
            required: true,
            message: '所属目录不能为空！',
            trigger: 'blur'
          }
        ]
      },
      props: {
        multiple: false,
        emitPath: false,
        checkStrictly: true,
        value: 'Id',
        label: 'Name',
        children: 'Children'
      },
      power: {
        pid: null,
        Name: null,
        Description: null,
        Icon: null
      }
    }
  },
  computed: {},
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.loadMenu()
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    formRegister,
    initScheme() {
      this.scheme = [
        {
          field: 'Name',
          label: '菜单名',
          component: 'Input',
          componentProps: {
            maxLength: 100,
            placeholder: '菜单名'
          }
        },
        {
          field: 'pid',
          label: '所属目录',
          component: 'TreeSelect',
          componentProps: {
            placeholder: '父级目录',
            data: this.menus,
            nodeKey: 'Id',
            renderAfterExpand: false,
            defaultExpandAll: true,
            props: { value: 'Id', label: 'Name', children: 'Children' },
            clearable: true
          }
        },
        {
          field: 'Icon',
          label: '图标',
          component: 'IconPicker',
          componentProps: {
            placeholder: '选择图标'
          }
        },
        {
          field: 'Description',
          label: '备注',
          component: 'Input',
          componentProps: {
            type: 'textarea',
            maxLength: 255,
            placeholder: '备注'
          }
        }
      ]
    },
    async save() {
      const data = await formMethods.validate()
      if (data == null) {
        return
      }
      this.savePower(Object.assign({}, data))
    },
    async savePower(data) {
      data.AppId = this.appId
      data.PowerType = 0
      const menu = this.menCache[data.pid]
      if (menu.type === 'menu') {
        data.ParentId = menu.Id
        data.SubSystemId = menu.subId
      } else {
        data.SubSystemId = menu.Id.substring(4)
        data.ParentId = 0
      }
      delete data.pid
      await appPowerApi.Set(data)
      this.$message({
        message: '更新成功!',
        type: 'success'
      })
      this.$emit('update:visible', false)
      this.$emit('close', true)
    },
    async loadMenu() {
      const list = await GetTrees({
        PowerType: 1
      })
      this.menus = list.map((c) => {
        const sub = {
          Id: 'sub_' + c.SubSysId,
          Name: c.SubSysName,
          Type: 'sub',
          Children: c.Powers
        }
        this.menCache[c.SubSysId] = sub
        this.formatPower(c.Powers, c.SubSysId)
        return sub
      })
      this.initScheme()
    },
    formatPower(list, subId) {
      if (list == null || list.length === 0) {
        return
      }
      list.forEach((c) => {
        c.type = 'menu'
        c.subId = subId
        this.menCache[c.Id] = c
        this.formatPower(c.Children, subId)
      })
    },
    async reset() {
      const res = await appPowerApi.Get(this.appId)
      this.title = '设置应用(' + this.appName + ')菜单'
      if (res == null) {
        this.power = {
          pid: null,
          Name: this.appName,
          Description: null,
          Icon: null
        }
      } else {
        this.power = {
          pid: res.ParentId === 0 ? 'sub_' + res.SubSystemId : res.ParentId,
          ParentId: res.ParentId,
          Name: res.Name,
          Description: res.Description,
          Icon: res.Icon
        }
      }
      this.source = res
      formMethods.setValues(this.power)
    },
    closeForm() {
      this.$emit('update:visible', false)
      this.$emit('close', false)
    },
    resetForm() {
      if (this.source == null) {
        this.power = {
          pid: null,
          Name: this.appName,
          Description: null,
          Icon: null
        }
      } else {
        this.power = {
          pid: this.source.ParentId === 0 ? 'sub_' + this.source.SubSystemId : this.source.ParentId,
          Name: this.source.Name,
          Description: this.source.Description,
          Icon: this.source.Icon
        }
      }
      formMethods.setValues(this.power)
    }
  }
}
</script>
